<template>
  <el-container class="container">

    <el-header class="header-container">
      <h2 class="font22">Web前端个人作品展示入口</h2>
    </el-header>
    <el-main class="home-main-container">
      <el-space size="large" class="flex justify-center align-center" wrap>
        <el-card class="box-card"
                 style="width: 300px"
                 v-for="(item,i) in data" :key="i">
          <template #header>
            <div class="text-bold card-header">
              {{ item.title }}
            </div>
          </template>
          <div class="">
            <el-link type="primary"
                     class="m_y5 m_r5"
                     target="_blank"
                     :href="item.demoUrl" v-if="item.demoUrl">在线演示地址
            </el-link>
            <el-link type="success" target="_blank"
                     class="m_y5"
                     :href="item.sourceUrl" v-if="item.sourceUrl">源码地址
            </el-link>
            <div class="line20 p_y5 font12 text-light">
              <div v-if="item.username">账号：{{ item.username }}</div>
              <div v-if="item.password">密码：{{ item.password }}</div>
            </div>
          </div>
          <div class="item">
            <div class="line20 text-dark" v-html="item.remark"></div>
          </div>
        </el-card>
      </el-space>
    </el-main>
    <el-footer class="footer-section">
      <div class="emblem-img-container">
        <el-image class="emblem" fit="none" :src="require('@/assets/emblem.png')"></el-image>
      </div>
      <el-link target="_blank" href="https://beian.miit.gov.cn/">桂ICP备16002289号</el-link>
    </el-footer>
  </el-container>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {Data} from './source'

export default defineComponent({
  name: 'Home',
  data() {
    return {
      data: Data,
    }
  }
});
</script>
<style lang="scss" scoped>

.container {

  .home-main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
  }

  .footer-section {
    display: flex;
    justify-content: center;
    align-items: center;

    .emblem-img-container {
      padding-top: 5px;
      padding-right: 2px;
    }
  }
}

</style>
